<template>
    <div class="login">
        <van-nav-bar left-arrow :border="false" @click-left="router.go(-1)"></van-nav-bar>
        <loginTitle></loginTitle>
        <van-form @submit="onSubmit" style="margin-top: 4rem;">
            <van-cell-group inset>
                <van-field left-icon="user-o" v-model="username.user" name="user" placeholder="请输入账号" :rules="[
                    { required: true, message: '请填写用户名' },
                    { pattern: /[\u4e00-\u9fa5_a-zA-Z0-9_]{3,6}/, message: '需3-6个字符' },
                ]" @update:model-value="onmodeluser" />
                <p class="myflxe">{{ InputPrompt.user }}</p>
                <van-field left-icon="lock" :right-icon="mypass ? 'closed-eye' : 'eye-o'" v-model="username.pass"
                    :type="mypass ? 'password' : 'text'" name="pass" placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }, { pattern: /[\u4e00-\u9fa5_a-zA-Z0-9_]{3,6}/, message: '需3-6个字符' }]"
                    @click-right-icon="onclick" @update:model-value="onmodelpass" />
                <p class="myflxe2">{{ InputPrompt.pass }}</p>
            </van-cell-group>
            <div class="login-con">
                <van-checkbox v-model="checked" icon-size="1.4rem"><span
                        style="color: #fb9c78; font-size: 1.2rem;">记住我</span></van-checkbox>
                <p style="color: #fb9c78;margin-right: 2rem; font-size: 1.2rem;" @click="router.push('/emailpass')">忘记密码？
                </p>
            </div>
            <div style="margin: 1.6rem; text-align: center;">
                <van-button type="primary" size="large" native-type="submit"
                    color="linear-gradient(to right, #e9837a, #7536f9)">
                    提交
                </van-button>
            </div>
        </van-form>
        <div class="logon-qita">其他方式登录</div>
        <loginItem :mybutton="mybutton"></loginItem>
        <loginText>
            <template #myregister><span @click="router.push('/register')" style="color: red;">去注册</span></template>
            <template #mylogin>还没有账号？</template>
        </loginText>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import router from '@/router';
import loginTitle from '@/components/loginTitle.vue';
import loginItem from '@/components/loginItem.vue';
import loginText from "@/components/loginText.vue";
import { loginPromise, loginData } from '@/types/index';
import { getLoginlist } from '@/apis/index';
import { useUserLogin } from '@/store/useLogin/index';
import { storeToRefs } from 'pinia'
import { setAccessToken, setRefershToken } from '../../config/storage';
let useLogin = useUserLogin()
// 表单绑定
let { username, checked } = storeToRefs(useLogin) as any
const mybutton = ref([
    {
        id: 1,
        icon: 'iconfont icon-shouji1',
        colors: 'color: #3a77f3;',
        text: '手机号登录'
    },
    {
        id: 2,
        icon: 'iconfont icon-weixin',
        colors: 'color: #09bb07;',
        text: '微信登录'
    }
]);
// 密码隐藏显示
let mypass = ref(true);
// 输入提示
let InputPrompt = ref({
    user: '',
    pass: ''
});

// 点击眼睛事件
let onclick = () => mypass.value = !mypass.value;
// 登录按钮
const onSubmit = async (values: loginPromise) => {
    console.log(values);
    
    let res = await getLoginlist(values) as loginData
    if (res.code == 200) {
        router.push('/Hello')
        setAccessToken(res.data.accessToken)
        setRefershToken(res.data.refreshToken)
        useLogin.setUsername()
    } else if (res.code == 100) {
        InputPrompt.value.user = res.msg
    } else if (res.code == 300) {
        InputPrompt.value.pass = res.msg
    }
}
// 输入框改变事件
let onmodeluser = () => InputPrompt.value.user = '';
let onmodelpass = () => InputPrompt.value.pass = '';
</script>

<style lang="scss" scoped>
.login {
    height: 100%;
    width: 100%;

    .login-con {
        margin-left: 3rem;
        margin-bottom: 4rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logon-qita {
        text-align: center;
        color: #aea6d0;
        font-size: 1.3rem;
    }

    .myflxe {
        position: fixed;
        left: 5.5rem;
        font-size: 1.2rem;
        color: red;
        top: 22.5rem;
    }

    .myflxe2 {
        position: fixed;
        left: 5.5rem;
        font-size: 1.2rem;
        color: red;
        top: 27.9rem;
    }
}

::v-deep .van-nav-bar .van-icon {
    color: #000;
}

::v-deep .van-button {
    height: 4.5rem;
    width: 32rem;
    border-radius: 1rem;
}

::v-deep .van-cell {
    height: 5.5rem;
}

::v-deep .van-field__left-icon {
    color: #8560c7;
}
</style>